<template>
  <div class="mian">
    <div class="outDiv">
      <div>
        <go-back></go-back>
        <div class="scrollerDiv">
          <div class="stepImage">
            <img src="~/static/images/step3.png" style="width: 100%" />
          </div>
          <div class="progressBarWrap">

          </div>

          <div class="container">
            <div class="include">
              <x-circle
                :percent="percent"
                :stroke-width="10"
                stroke-color="rgba(255, 214, 61, 1)"
                trail-color="#F1F1F1"
                :trail-width="10"
              >
                <div class="innerDiv" @click="gotosBalance">
                  <div>
                    <div style="height: 1rem;" v-if="loadflag==false">
                      <img class="imgIcon" src="~/static/images/volunteer_icon_click.png" alt />
                    </div>
                    <div style="height: 0.5rem" v-else></div>
                  </div>
                  <p>{{loadflag?percent+'%':''}}</p>
                  <p>{{loadflag?'生成方案中...':'生成方案'}}</p>
                </div>
              </x-circle>
            </div>
          </div>
        </div>
      </div>
      <call-taost :show="showCall" :phone="18971638225" @cancel="gos">
        <a slot="body" class="call">考生信息或者偏好填写有误，请致电 18971638225 或微信添加 sxzxxq 咨询相关工作人员</a>
      </call-taost>
    </div>
  </div>
</template>

<script>
import { Scroller, XCircle } from "vux";
import ls from "store2";
import { setInterval, clearInterval } from "timers";
import goBack from "~/components/goBack";
import callTaost from "~/components/callTaost";
import { generateSolutionsZj } from "~/api/volunteer";
import warnTaost from "~/components/warnTaost";
export default {
  components: {

    Scroller,
    XCircle,
    goBack,
    callTaost
  },
  data() {
    return {
      showCall: false,
      isShowBar: false,
      percentage: 0,
      // xBuy: false,
      votimes: 0,
      nun: 0,
      loadflag: false,
      percent: 0,
      timer: null,
      timeOutEvent: 0,
      userType: null,
      productCode: ""
    };
  },
  mounted() {
    this.userType = this.$route.query.type;
  },
  created() {
    this.$visit(this.$route.path)
  },
  methods: {
    gos() {
      this.showCall = false;
    },
    getStudentInfo() {
      generateSolutionsZj(ls.get("userType"))
        .then(res => {
          if (res.code === "0") {
            ls.set("caseData1", res.data.balance);
            ls.set("caseData2", res.data.academy);
            ls.set("caseData3", res.data.major);
            this.percent = 100;
            if (this.percent === 100) {
              setTimeout(() => {
                this.$hideLoading();
                ls.set("preUrl", "stepThree");
                this.commonJs.gosto("programme");
              }, 500);
            }
            return false;
          }
          if ((res.code = "1200004")) {
            this.showCall = true;
            clearInterval(this.timer);
            this.$hideLoading();
            return false;
          }
        })
        .catch(error => {
          this.$vux.toast.text(error);
        });
    },
    gotosBalance() {
      this.nun += 1;
      if (this.nun === 1) {
        this.circleTurnAround(); //不带卡券
        this.getStudentInfo();
        this.loadflag = true;
      }
    },
    //开始按
    gotouchstart() {
      let that = this;
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
      this.circleTurnAround();
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    gotouchend() {
      clearInterval(this.timer);
      clearTimeout(this.timeOutEvent);
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容（尤如onclick事件）
        // this.percent += 1;
      }
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gotouchmove() {
      clearInterval(this.timer);
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
    },
    circleTurnAround() {
      this.timer = setInterval(() => {
        this.percent += 1;

        if (this.percent > 100) {
          clearInterval(this.timer);
          this.percent = 100;
        }
      }, 3000);
    }
  }
};
</script>

<style lang="less" scoped>
.call {
  font-size: 0.3rem;
}
.progressBarWrap {
  height: 0.2rem;
}

.vue-progress-bar {
  width: 6.3rem;
  height: 0.2rem;
  margin: 0 auto;

  .vue-progress-bar__outer {
    background: #eee;
    // width: 6.3rem;
    width: 100%;
    height: 0.2rem;
    border-radius: 0.1rem;
  }

  .vue-progress-bar__perent {
    width: 0.8rem;
    text-align: center;
    line-height: 0.2rem;

    span {
      font-size: 0.24rem;
      color: #222;
    }
  }
}

.vue-progress-bar__inner {
  height: 0.2rem;
  display: block;
  background: @mainColor;
  width: 0;
  border-radius: 0.1rem;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  -webkit-transition: width 3s ease;
  -moz-transition: width 3s ease;
  transition: width 3s ease;
  -webkit-animation: progressbar 7s infinite;
  animation: progressbar 7s infinite;
}
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  .scrollerDiv {
    width: 100%;

    .stepImage {
      margin-bottom: 0.9rem;
      padding: 0 0.3rem;
    }

    .container {
      width: 100%;
      height: 7.5rem;
      background: url("https://static.shengxue985.com/sxzx_wechat/images/volunteer_pic_bg_slices.png") no-repeat;
      background-size: 100% 100%;
      padding-top: 2.1rem;

      .include {
        margin: 0 auto;
        width: 3.4rem;
        height: 3.4rem;

        .innerDiv {
          border-radius: 50%;
          margin-left: 0.3rem;
          width: 2.8rem;
          height: 2.8rem;
          text-align: center;
          padding-top: 0.54rem;
          background: #fff;
          -webkit-touch-callout: none;
          /*系统默认菜单被禁用*/
          -webkit-user-select: none;
          /*webkit浏览器*/
          -khtml-user-select: none;
          /*早期浏览器*/
          -moz-user-select: none;
          /*火狐*/
          -ms-user-select: none;
          /*IE10*/
          user-select: none;

          div {
            padding-bottom: 0.2rem;

            .imgIcon {
              z-index: -1;
              width: 1rem;
              height: 1rem;
              pointer-events: none;
            }
          }

          p {
            color: @mainColor;
            font-size: 0.3rem;
            font-weight: bold;
            letter-spacing: 0.03rem;
          }
        }
      }
    }
  }
}

svg {
  width: 0.4rem;
  height: 0.4rem;
}
</style>
